<template>
    <div class="">
        <box title="设备概况" >
            <div class="h-[200px] py-[40px] px-[36px]">
                <div class="flex justify-between">
                    <div v-for="(item, index) in equipmentList" :key="index">
                        <div class="flex">
                            <div class="w-[13px] h-[13px] mr-[8px]">
                                <img class="w-[13px] h-[13px]" :src="item.img" alt="">
                            </div>
                            <div class="alltext">
                                {{ isNullOrEmpty( item.name ) }}
                            </div>
                        </div>
                        <div class="number title ml-[20px] pt-[12px]">
                            <div v-if="item.number <= 999"> {{ isNullOrEmpty( item.number ) }}</div>
                            <div v-else>999+</div>
                        </div>
                    </div>
                </div>
                <div class="pt-[32px]">
                    <div class="flex justify-between">
                        <div v-for="(item, index) in equipmentLists" :key="index">
                            <div class="flex items-center">
                                <div class="w-[6px] h-[6px] rounded-[50%] mr-[8px]">
                                    <div class="w-[6px] h-[6px] rounded-[50%] "
                                        :class="item.id == 1 ? 'bg-[#FF802B]' : item.id == 2 ? 'bg-[#B4B4B4]' : item.id == 3 ? 'bg-[#FA1C1A]' : 'bg-[#21CC31]'">
                                    </div>
                                </div>
                                <div class="alltext">
                                    {{ isNullOrEmpty( item.name ) }}
                                </div>
                            </div>
                            <div class="number title pl-[14px] pt-[12px]">
                                <div v-if="item.number <= 999"> {{ isNullOrEmpty( item.number ) }}</div>
                                <div v-else>999+</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </box>
    </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty} from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
const props = defineProps({
    equipmentLists: {
    type: Object,
    default: () => []
  },
  equipmentList: {
    type: Object,
    default: () => []
  },
});
// console.log("获取到设备概况",props);


</script>
<style scoped lang="scss"></style>
